<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-10-22 11:53:05
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-10-29 19:33:43
 * @FilePath: \vue-echarts\src\components\Map.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<!-- 双击事件 -->
 <div class="com-container" @dblclick="returnMap">
  <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { getProvinceMapInfo } from '@/utils/map_utils'
export default {
  data () {
    return {
      chartInstance: null,
      allDate: null, // 服务器返回的数据
      mapData: {} // 获取省份的地图矢量数据
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    // 适配屏幕大小
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化图表
    async initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.map_ref, this.theme)
      // 获取地图矢量数据
      // http://127.0.0.1:8999/static/map/china.json
      // 由于获取的数据不是位于KOA2的后台，不能使用this.$http
      const ret = await axios.get('http://127.0.0.1:8999/static/map/china.json')
      // 使用 registerMap 注册的地图名称('xxx', 矢量地图数据)
      this.$echarts.registerMap('china', ret.data)
      const initOption = {
        title: {
          text: '商家分布',
          left: 20,
          top: 20
        },
        // 地理坐标系组件,地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
        // map:与registerMap中的第一个参数一致
        geo: {
          type: 'map',
          map: 'china', // map:与registerMap中的第一个参数一致
          top: '5%',
          bottom: '5%',
          itemStyle: {
            areaColor: '#2E72BF',
            borderColor: '#ccc'
          }
        },
        legend: {
          left: '5%',
          bottom: '5%',
          orient: 'vertical'
        }
      }
      this.chartInstance.setOption(initOption)
      // 事件监听
      this.chartInstance.on('click', async arg => {
        console.log(arg)
        // 通过arg.name获得省名，然后通过工具类转化为拼音
        const provinceInfo = getProvinceMapInfo(arg.name)
        console.log(provinceInfo.key)
        // 如果缓存地图中没有当前访问的省份信息，就再次请求
        if (!this.mapData[provinceInfo.key]) {
          const ret = await axios.get('http://127.0.0.1:8999' + provinceInfo.path)
          console.log(ret)
          // 进行缓存
          this.mapData[provinceInfo.key] = ret.data
          // 使用 registerMap 注册的地图名称('xxx', 矢量地图数据)
          this.$echarts.registerMap(provinceInfo.key, ret.data)
        }
        const changeOption = {
          geo: {
            map: provinceInfo.key
          }
        }
        this.chartInstance.setOption(changeOption)
      })
    },
    // 获取服务器数据
    async getData () {
      // http://127.0.0.1:8888/api/map
      const { data: ret } = await this.$http.get('map')
      this.allDate = ret
      console.log(this.allDate)
      // 更新图表
      this.updateChart()
    },
    updateChart () {
      // 处理图表需要的数据
      const legendArr = this.allDate.map(item => {
        return item.name
      })
      const seriesArr = this.allDate.map(item => {
        // return的这个对象代表的是一个类别下的所有散点数据
        // 如果想在地图中显示散点的数据，需要给散点的图表增加一个配置：coordinateSystem
        return {
          type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）图
          rippleEffect: { // 涟漪特效相关配置
            color: 'red',
            scale: 4,
            brushType: 'fill' // 涟漪效果
          },
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo'
        }
      })
      const dataOption = {
        legend: {
          data: legendArr
        },
        series: seriesArr
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter () {
      // 获取容器宽度
      const titleFonSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
      // 和分辨率大小相关的配置项
      const adapterOption = {
        // 让标题进行适配
        title: {
          textStyle: {
            fontSize: titleFonSize
          }
        },
        // 让图例进行适配
        legend: {
          itemWidth: titleFonSize / 2,
          itemHeight: titleFonSize / 2,
          itemGap: titleFonSize / 3,
          textStyle: {
            fontSize: titleFonSize / 2
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    // 回到中国地图
    returnMap () {
      const returnOption = {
        geo: {
          map: 'china'
        }
      }
      this.chartInstance.setOption(returnOption)
    }
  },
  computed: { // computed是不能传参数的
    // 辅助函数
    // ...展开运算符
    ...mapState(['theme'])
  },
  // 对theme属性进行监听
  watch: {
    theme () {
      console.log('主题切换了')
      // 销毁当前图表
      this.chartInstance.dispose()
      // 以新主题初始化图表对象
      this.initChart()
      this.screenAdapter()
      this.updateChart()
    }
  }
}
</script>

<style>

</style>
